<template>
  <view>
    <u-modal
      :show="show"
      :title="title"
      :show-confirm-button="showConfirmButton"
      :show-cancel-button="showCancelButton"
      :confirm-text="confirmText"
      :cancel-text="cancelText"
      :confirm-color="confirmColor"
      :cancel-color="cancelColor"
      @confirm="confirm"
      @cancel="cancel"
    >
      <view class="slot-content">
        <div v-if="modalList.length == 0" style="text-align: center;">
          <text v-if="!custom.titleIconShow" class="icon-warning font_family icon-jingshi_tongyong_1" />
          <p style="font-size: 28rpx;text-align: left;margin-top: 32rpx;">{{ custom.title }}</p>
        </div>
        <div v-else>
          <text class="icon-warning-l icon-warning font_family icon-jingshi_tongyong_1" />
          <p style="width: 86%;font-size: 28rpx;text-align: left;float:left;margin-bottom: 44rpx;">
            {{ custom.title }}</p>
          <div style="width: 100%;max-height: 300rpx;overflow-y: scroll;">
            <div v-for="(item, index) in modalList" :key="index">
              <image style="width: 124rpx;height: 124rpx;float:left;margin-right: 24rpx;" :src="item.productPic" />
              <div style="width: calc(100% - 150rpx);float:left;height: 124rpx;">
                <p style="height:72rpx;font-size: 24rpx;text-align:left;">{{ item.skuName }}</p>
                <p style="font-size: 24rpx;color:#aaa;text-align: left;">编码：{{ item.skuCode }}</p>
              </div>
            </div>
          </div>
          </image>
        </div>
        <template
          v-if="custom"
        >
          <view class="btn-box">
            <button
              v-if="custom.showCancelButton"
              class="btn cancel-btn"
              :plain="true"
              @click="cancel"
            >
              {{ custom.cancelText }}
            </button>
            <button
              v-if="custom.showConfirmButton"
              class="btn confirm-btn"
              :plain="true"
              @click="confirm"
            >
              {{ custom.confirmText }}
            </button>
          </view>
        </template>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  name: 'ConfirmModal',
  components: {},

  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    showConfirmButton: {
      type: Boolean,
      default: false
    },
    showCancelButton: {
      type: Boolean,
      default: false
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmColor: {
      type: String,
      default: '#2979ff'
    },
    cancelColor: {
      type: String,
      default: '#606266'
    },
    custom: {
      type: Object,
      default() {
        return null
      }
    },
    modalList: {
      type: Array,
      default() {
        return []
      }
    },
  },
  methods: {
    confirm() {
      this.$emit('confirm', this.custom)
    },
    cancel() {
      this.$emit('cancel', this.custom)
    },
  }
}
</script>

<style scoped lang="scss">
.btn-box{
  text-align: center;
  .btn{
    margin: 48rpx 12rpx 0;
    height: 72rpx;
    line-height: 72rpx;
    font-size: $uni-font-size-base;
    display: inline-block;
  }
  .cancel-btn{
    border: 2rpx solid #d3d3d3;
    background: $uni-bg-color;
    color: #222;
    padding:0 24rpx;
  }
  .confirm-btn{
    color: #fff;
    background: $uni-orange;
    padding:0 24rpx;
    border: 0;
  }
}
/deep/ .slot-content{
  width: 100%;
  .icon-warning{
    color: $uni-color-warning;
    font-size: 76rpx;
  }
  .icon-warning-l{
    color: $uni-color-warning;
    font-size: 38rpx;
    float: left;
    margin-right: 24rpx;
  }
}
</style>
